
<include file="./Tpl/default/Index/header.html"/>
<css file="__PUBLIC__/index/css/user.css"/>

<script>
    var url = "__URL__";
    $(function(){
        $('.title').hover(function(){
            $('.title').removeClass('hover');
            $(this).addClass('hover');
        },function(){
            $('.title').removeClass('hover'); 
        })
        $('.title').click(function(){
            if($(this).attr('a')==1){
                return false;
            }
            $('.title').children('.data').animate({opacity:1},300)
            $(this).children('.data').animate({opacity:0},400)
            $('.cont').hide();
            $('.title').removeClass('click').attr('a',0)
            var tH = $(this).next().height();
            $(this).addClass('click')
            $(this).attr('a',1)
            $(this).next().css({height:0})
            $(this).next().show().animate({opacity:1,height:tH},1000)
        })
        $('.error').css({left:($(window).width()-850)/2});
        $('.uname_btn').click(function(){
            var uname = $("input[name=uname]").val();
            var nbsp = /^\s*|\s*$/ig;
            uname =uname.replace(nbsp,'');
            //验证用户名是否为空
            if(uname==''){
                $('.error .e_img').addClass('errimg');
                $('.error .neiron').html('昵称不能为空');
                error();
                return false;
            }
            var city = $('input[name=city]').val();
            var home = $('input[name=home]').val();
            var about = $('textarea[name=about]').val();
            $.post(url+'/edit',{'uname':uname,'city':city,'home':home,'about':about},function(data){
                if(data.num==0){
                    $('.error .e_img').removeClass('suc');
                    $('.error .e_img').addClass('errimg');
                    $('.error .neiron').html('昵称已存在');
                    error();
                }else if(data.num==1){
                    $('.error .e_img').removeClass('errimg');
                    $('.error .e_img').addClass('suc');
                    $('.error .neiron').html('修改成功');
                    $('.data_uname').html(uname);
                    error();
                }
            },'json')
        })
        function error(){;
            $('.error').animate({top:38},500);
            setTimeout(function(){
                $('.error').animate({top:-100},500);
            },2000)
        }
        var pid = "{$Think.session.uid}";
        $("#upload").uploadify({
            'height':36,
            'width':148,
            'swf':pu+'/upload/uploadify.swf',  
            'uploader':app+"/User/upload/uid/"+pid,
            'fileTypeExts':"*.jpg;*.jpeg;*.gif;*.png",
            'buttonImage':pu+'/index/images/upload.png',
            'onUploadSuccess': function (file,data, response) {
                $('.error .e_img').removeClass('errimg');
                $('.error .e_img').addClass('suc');
                $('.error .neiron').html('头像修改成功');
                error();
                $('.user_thump , .small_thump').attr('src',data);
            },
            'onInit': function () {                        //载入时触发，将flash设置到最小
                $("#uploadify-queue").hide();
            } 
        })
                
        $('.email_btn').click(function(){
            var username = $("input[name=usname]").val();
            var nbsp = /^\s*|\s*$/ig;
            username =username.replace(nbsp,'');
            //验证用户名是否为空
            if(username==''){
                $('.error .e_img').addClass('errimg');
                $('.error .neiron').html('邮箱不能为空');
                error();
                return false;
            }
            var repg = /^[a-zA-Z0-9]{6,15}@\w+\.\w+$/ig;
            //验证格式是否正确
            if(!repg.exec(username)){
                $('.error .e_img').addClass('errimg');
                $('.error .neiron').html('邮箱格式不正确');
                error();
                return false;
            }
            var password = $('input[name=pass]').val();
            $.post(url+'/username',{'username':username,'password':password},function(data){
                if(data.num==0){
                    $('.error .e_img').addClass('errimg');
                    $('.error .neiron').html('邮箱已存在');
                    error();
                }else if(data.num==2){
                    $('.error .e_img').addClass('errimg');
                    $('.error .neiron').html('密码错误');
                    error();
                }else{
                    $('.error .e_img').removeClass('errimg');
                    $('.error .e_img').addClass('suc');
                    $('.error .neiron').html('修改成功');
                    $('.nowname').html(username);
                    error();
                }
            },'json')
        })
        $('.pass_btn').click(function(){
            var old = $('input[name=oldpassword]').val();
            var newpass = $('input[name=newpassword]').val();
            var t = $('input[name=tpassword]').val();
            var nbsp = /^\s*|\s*$/ig;
            newpass =newpass.replace(nbsp,'');
            //验证用户名是否为空
            if(newpass==''){
                $('.error .e_img').addClass('errimg');
                $('.error .neiron').html('新密码不能为空');
                error();
                return false;
            }
            if(newpass!==t){
                $('.error .e_img').addClass('errimg');
                $('.error .neiron').html('两次密码不一致');
                error();
                return false;
            }
            $.post(url+'/pass',{'password':old,'new':newpass},function(data){
                if(data.num==0){
                    $('.error .e_img').addClass('errimg');
                    $('.error .neiron').html('当前密码错误');
                    error();
                    return false;
                }else{
                    $('.error .e_img').removeClass('errimg');
                    $('.error .e_img').addClass('suc');
                    $('.error .neiron').html('修改成功');
                    $('input[name=newpassword]').val('');
                    $('input[name=tpassword]').val('');
                    $('input[name=oldpassword]').val('');
                    error();
                }
            },'json')
        })
    })
</script>
<div class="middle">
    <div class="top">
        <p>帐号设置</p>
    </div>
    <div class="box">
        <div class="title" a="0">
            个人资料
            <div class="data data_uname">{$arr.uname}</div>
            <a href="javascript:;" class="edit">编辑</a>
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td class="name">
                        登录名：
                    </td>
                    <td>
                        {$arr.username}
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        昵称：
                    </td>
                    <td>
                        <input type="text" value="{$arr.uname}" name="uname"/>
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        所在城市：
                    </td>
                    <td>
                        <input type="text" value="{$arr.city}" name="city"/>
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        个人主页：
                    </td>
                    <td>
                        <input type="text" value="{$arr.home}" name="home"/>
                    </td>
                </tr>
                <tr>
                    <td class="name about">
                        关于自己：
                    </td>
                    <td>
                        <textarea name="about" style="height:60px;width:278px">{$arr.about}</textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a href="javascript:;" class="btn1 uname_btn">提交</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="box">
        <div class="title">
            头像
            <div class="data"><img src="{$arr.thump}" height="40" width="40" class="small_thump"/></div>
            <a href="javascript:;" class="edit">编辑</a>
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td>
                        <div class="img">
                            <img src="{$arr.thump}" width="100" height="100" class="user_thump"/>
                        </div>
                    </td>
                    <td style="padding:15px">
                        <input type="file" name="upload" id="upload" />
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="box">
        <div class="title">
            登录邮箱
            <div class="data nowname">
                <if condition="!empty($arr['username'])">
                    {$arr.username}
                    <else/>
                    {$arr.qqname}
                </if>
            </div>
            <a href="javascript:;" class="edit">编辑</a>
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td class="name">
                        当前邮箱：
                    </td>
                    <td class="nowname">
                <if condition="!empty($arr['username'])"> {$arr.username}<else/>{$arr.qqname}</if>
                </td>
                </tr>
                <tr>
                    <td class="name">
                        新邮箱：
                    </td>
                    <td>
                        <input type="text" name="usname" />
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        登录密码:
                    </td>
                    <td>
                        <input type="password" name="pass" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a href="javascript:;" class="btn1 email_btn" >保存</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="box">
        <div class="title">
            密码
            <div class="data">
                *******
            </div>
            <a href="javascript:;" class="edit">编辑</a>
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td class="name">
                        当前密码：
                    </td>
                    <td>
                        <input type="password" name="oldpassword" />
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        新密码：
                    </td>
                    <td>
                        <input type="password" name="newpassword" />
                    </td>
                </tr>
                <tr>
                    <td class="name">
                        确认密码:
                    </td>
                    <td>
                        <input type="password" name="tpassword" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a href="javascript:;" class="btn1 pass_btn">保存</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="box">
        <div class="title">
            个性网站
            <div class="data">
                {$arr.web}
            </div>
            <a href="javascript:;" class="edit">编辑</a>
        </div>
        <div class="cont">
            <table>
                <tr>
                    <td class="name">
                        huaban.com/
                    </td>
                    <td>
                        <input type="text" name="web" value="{$arr.web}"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <a href="javasctipt:;" class="btn1">保存</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<div class="error">
    <div class="e_img">

    </div>
    <div class="neiron">

    </div>
</div>
</body>
</html>
